<template>
  <div style="margin-top:10px">
    <el-row :gutter="20">
      <el-col :xs="9" :sm="6" :md="5" :lg="4" :xl="4"
        ><el-input
          v-model="name"
          size="small"
          clearable
          placeholder="输入项目名称搜索(当前暂支持项目名)"
          style="width: 280px"
          class="filter-item"
      /></el-col>
      <!-- @change="entreSearchWords" -->

      <el-col :xs="15" :sm="18" :md="19" :lg="20" :xl="20"
        ><span>
          <el-button
            class="filter-item"
            size="mini"
            type="success"
            icon="el-icon-search"
            @click="search()"
            >搜索</el-button
          >
        </span></el-col
      >
    </el-row>

    <div class="container" style="margin-top:20px">
      <div class="handle-box">
        <el-button class="btn-upload" type="primary" @click="handleUpdate"
          >原生手动上传部署包</el-button
        >
        <el-button class="btn-upload" type="primary" @click="handleUpdate1"
          >el-upload上传部署包</el-button
        >
        <el-button type="primary" @click="flush">刷新</el-button>
        <el-button type="primary" @click="createProject">新建项目</el-button>
        <el-button type="primary" @click="remoteDevelopment"
          >项目部署</el-button
        >
        <el-button type="primary" @click="addServer">新建服务器</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        height="650"
        border
        fit
        @select="onTableSelect"
      >
        >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="deployId" label="应用编号"> </el-table-column>
        <el-table-column prop="appName" label="应用名称"> </el-table-column>
        <el-table-column prop="appVersion" label="部署版本号">
        </el-table-column>
        <el-table-column
          prop="appDeploymentTime"
          label="项目部署时间"
        ></el-table-column>
        <el-table-column prop="appCreateTime" label="项目创建时间">
        </el-table-column>
        <el-table-column prop="appCurrentVersion" label="当前版本号">
        </el-table-column>
        <el-table-column prop="appUpdateTime" label="版本更新时间">
        </el-table-column>
        <el-table-column prop="appOwner" label="部署人"> </el-table-column>
        <el-table-column
          prop="appRemoteDevelopment"
          label="是否部署"
          :formatter="formatRemoteBoolean"
        >
        </el-table-column>
        <el-table-column
          prop="update"
          label="检查更新"
          :formatter="formatBoolean"
        >
        </el-table-column>
        <el-table-column label="操作" width="240px" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)"
              >检查更新</el-button
            >
            <el-button
              type="text"
              icon="el-icon-delete"
              class="red"
              @click="handleDelete(scope.$index, scope.row)"
              >立即更新</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="text-align: center">
        <!-- <span class="demonstration"></span> -->
        <el-pagination
          :current-page="1"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <el-dialog
        title="上传"
        :visible.sync="dialogVisible"
        width="30%"
        @close="resetForm"
      >
        <el-form ref="form" :model="form" label-width="100px" :rules="rules">
          <el-form-item label="项目编号" v-show="false">
            <el-input v-model="form.appVersionNo"></el-input>
          </el-form-item>
          <el-form-item label="项目名称" required>
            <el-select
              placeholder="请选择项目"
              v-model="value"
              @change="currStationChange"
            >
              <el-option
                v-for="item in options"
                :key="item.appNo"
                :label="item.appName"
                :value="item.appNo"
              >
              </el-option>
            </el-select> </el-form-item
          ><el-form-item label="项目版本" required>
            <el-input
              v-model="form.appVersion"
              placeholder="请输入上传的项目版本"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <div style="text-align: center; padding-top: 50px">
              <input type="file" id="avatar" @change="changeFile" ref="file" />
              <!-- <button @click="to_upload_file">上传</button> -->
              <br />
              <br />
              <div
                style="text-align: left;display: inline-block;width: 300px; height: 40px; border: 1px solid #44A1F8; border-radius: 2px;position: relative"
              >
                <div
                  id="progress_bar"
                  style="display: inline-block; width: 0px; height: 40px;background-color: #64B587"
                ></div>
                <div
                  style="text-align: center;width: 300px;position: absolute; top: 0; font-size:16px; color: #413F43"
                >
                  <div id="loading">
                    上传进度0%
                  </div>
                </div>
              </div>
            </div>
          </el-form-item> </el-form
        ><!-- ><el-button type="primary" @click="submitUpload">确 定</el-button> -->
        <!-- ><el-button type="primary" @click="to_upload_file">确 定</el-button> -->
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="to_upload_file">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button @click.native="resetForm" type="info">重置</el-button>
        </span>
      </el-dialog>

      <el-dialog
        title="上传部署包"
        :visible.sync="dialogVisible2"
        width="30%"
        @close="resetForm"
      >
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          :rules="projectRules"
        >
          <el-form-item label="项目编号" v-show="false" prop="appVersionNo">
            <el-input v-model="form.appVersionNo"></el-input>
          </el-form-item>

          <el-form-item label="项目名称" prop="options">
            <el-select
              placeholder="请选择项目"
              v-model="form.options"
              @change="currStationChange"
            >
              <el-option
                v-for="item in options"
                :key="item.appNo"
                :label="item.appName"
                :value="item.appNo"
              >
              </el-option>
            </el-select> </el-form-item
          ><el-form-item label="项目版本" prop="appVersion">
            <el-input
              v-model="form.appVersion"
              placeholder="请输入上传的项目版本"
            ></el-input>
          </el-form-item>
          <el-form-item >
            <el-upload
              class="upload-demo"
              ref="upload"
              action="/api/localStorage"
              drag
              :auto-upload="false"
              :headers="headers"
              :before-upload="beforeUpload"
              :on-success="handleFilUploadSuccess"
              :on-remove="handleRemove"
              :on-error="handleUploadError"
              :on-progress="uploadFileProcess"
              
            >
              >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div class="el-upload__tip" slot="tip">
                上传文件大小不超过100MB
              </div>
            </el-upload>
          </el-form-item> </el-form
        ><!-- ><el-button type="primary" @click="submitUpload">确 定</el-button> -->
        <!-- ><el-button type="primary" @click="to_upload_file">确 定</el-button> -->
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitUpload('form')"
            >确 定</el-button
          >
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button @click.native="resetForm" type="info">重置</el-button>
        </span>
      </el-dialog>

      <el-dialog
        title="新建项目"
        :visible.sync="addDialogVisible"
        width="30%"
        @close="resetAddForm"
      >
        <el-form ref="addForm" :model="addForm" :rules="addProjectRules">
          <el-form-item label="项目名称" prop="projectName">
            <el-input v-model="addForm.projectName"> </el-input>
          </el-form-item>
          <el-form-item label="项目版本" prop="projectVersion">
            <el-input v-model="addForm.projectVersion"> </el-input>
          </el-form-item>
          <el-form-item label="创建人" prop="projectOwner">
            <el-input v-model="addForm.projectOwner"> </el-input>
          </el-form-item>
          <el-form-item label="创建时间" prop="projectCreateTime">
            <div class="block">
              <span class="demonstration"></span>
              <el-date-picker
                type="datetime"
                placeholder="选择日期时间"
                v-model="addForm.projectCreateTime"
              >
              </el-date-picker>
            </div>
          </el-form-item>

          <el-form-item label="服务器列表" prop="serverOptions">
            <el-select
              placeholder="请选择服务器"
              v-model="addForm.serverOptions"
              @change="currStationServerChange"
            >
              <el-option
                v-for="item in serverOptions"
                :key="item.serverNo"
                :label="item.serverName"
                :value="item.serverNo"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer"
          ><el-button type="primary" @click="handleAdd('addForm')"
            >确 定</el-button
          >
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button @click.native="resetAddForm" type="info">重置</el-button>
        </span>
      </el-dialog>

      <el-dialog
        title="新建服务器"
        :visible.sync="addServerDialogVisible"
        width="30%"
        @close="resetAddServerForm"
      >
        <el-form
          ref="addServerForm"
          :model="addServerForm"
          :rules="serverRules"
        >
          <el-form-item label="服务器名称" prop="serverName">
            <el-input v-model="addServerForm.serverName"></el-input>
          </el-form-item>
          <el-form-item label="服务器地址" prop="serverIp">
            <el-input
              v-model="addServerForm.serverIp"
              placeholder="例如:'192.168.0.1'"
            ></el-input>
          </el-form-item>
          <el-form-item label="服务器端口">
            <el-input
              v-model="addServerForm.serverPort"
              placeholder="默认端口:22"
            ></el-input>
          </el-form-item>
          <el-form-item label="服务器登录名" prop="serverUserName">
            <el-input
              v-model="addServerForm.serverUserName"
              placeholder="此处为服务端freesshd账号登录名"
            ></el-input>
          </el-form-item>
          <el-form-item label="服务器登录密码" prop="serverPassword">
            <el-input
              v-model="addServerForm.serverPassword"
              placeholder="此处为服务端freesshd账号密码"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer"
          ><el-button type="primary" @click="handleAddServer('addServerForm')"
            >确 定</el-button
          >
          <el-button @click="addServerDialogVisible = false">取 消</el-button>
          <el-button @click.native="resetAddServerForm" type="info"
            >重置</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { timeAgo } from "@/filters";
import componentsRouter from "@/router/modules/components";
export default {
  inject: ["reload"],
  data() {
    return {
      // headers: { "auth-token": getToken() },
      pageSize: 10,
      page: "",
      total: 1,
      name: "",
      id: "",
      createBy: "",
      multipleTable: [],
      timer: 0,
      options: [],
      serverOptions: [],
      arr: {
        appNo: "",
        appName: ""
      },
      serverArr: {
        serverNo: "",
        serverName: ""
      },
      value: [],
      serverValue: [],
      dialogVisible: false,
      dialogVisible2: false,
      addDialogVisible: false,
      addServerDialogVisible: false,
      form: {
        appVersionName: "",
        appVersionNo: "",
        appVersion: "",
        options: "",
        
      },
      tableData: [],
      addForm: {
        projectName: "",
        projectVersion: "",
        projectOwner: "",
        projectCreateTime: "",
        serverOptions: ""
      },
      addProject: [],
      addServerForm: {
        serverName: "",
        serverIp: "",
        serverPort: "",
        serverUserName: "",
        serverPassword: ""
      },

      projectRules: {
        appVersion: [
          { required: true, message: "请输入项目版本", trigger: "blur" }
        ],
        options: [
          {
            required: true,
            message: "请对项目做出选择",
            trigger: ["blur", "change"]
          }
        ],
        // projectFile: [
        //   {
        //     required: true,
        //     message: "部署包必须上传，且大小不超过100MB",
        //     trigger: "change"
        //   }
        // ]
      },

      addProjectRules: {
        projectName: [
          { required: true, message: "请输入项目名称", trigger: "blur" }
        ],
        projectVersion: [
          { required: true, message: "请输入项目版本", trigger: "blur" }
        ],
        projectOwner: [
          { required: true, message: "请输入项目创建人", trigger: "blur" }
        ],
        projectCreateTime: [
          { required: true, message: "请输入项目创建时间", trigger: "blur" }
        ],
        serverOptions: [
          {
            required: true,
            message: "请选择服务器",
            trigger: ["blur", "change"]
          }
        ]
      },

      serverRules: {
        serverName: [
          { required: true, message: "请输入服务器名称", trigger: "blur" }
        ],
        serverIp: [
          { required: true, message: "请输入服务器地址", trigger: "blur" }
        ],
        serverUserName: [
          { required: true, message: "请输入服务器登录账号", trigger: "blur" }
        ],
        serverPassword: [
          { required: true, message: "请输入服务器登录密码", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.get();
    this.getServerInfo();
    this.listVersion();
  },

  methods: {
    //所有分页后的的项目信息
    listVersion() {
      this.$axios.get("/api/admin/page/version/init").then(resp => {
        if (resp.status === 200) {
          // console.log(resp.data.data.datas);
          this.tableData = resp.data.data.datas;
        }
      });
    },

    //获得所有的项目版本信息
    get() {
      this.$axios
        .get("/api/version")
        .then(res => {
          // this.tableData = res.data.data;
          const array = res.data.data;
          // console.log(JSON.stringify(res.data.data));
          this.total = res.data.data.length;
          for (let i = 0; i < array.length; i++) {
            this.arr = {
              appNo: array[i].deployId,
              appName: array[i].appName
            };
            this.options.push(this.arr);
          }
        })
        .catch(error => {});
    },

    // 分页
    current_change: function(currentPage) {
      this.currentPage = currentPage;
    },
    // 接收更改状态值
    search() {
      this.$axios
        .post("/api/admin/page/version/words/init", {
          words: this.name
        })
        .then(resp => {
          if (resp.status == 200) {
            this.tableData = [];
            var ar = [];
            var pageArr = resp.data.data;
            for (let i = 0; i < pageArr.length; i++) {
              const element = pageArr[i].datas;
              for (let j = 0; j < pageArr[i].datas.length; j++) {
                const element = pageArr[i].datas[j];
                this.tableData.push(element);
              }
            }
            this.total = pageArr.length;
          }
        })
        .catch(error => {
          this.$message.error(error.response.data.message);
        });
    },

    //获取服务器信息
    getServerInfo() {
      this.$axios
        .get("/api/server")
        .then(res => {
          const array = res.data.data;
          console.log(array);
          for (let i = 0; i < array.length; i++) {
            this.arr = {
              serverNo: array[i].id,
              serverName: array[i].serverName
            };
            this.serverOptions.push(this.arr);
          }
        })
        .catch(error => {});
    },

    //刷新页面
    flush() {
      this.reload();
    },

    //条数更改
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      // console.log(this.pageSize);
      this.$axios
        .post("/api/admin/page/version/pageSize", {
          page: this.page,
          pageSize: this.pageSize
        })
        .then(resp => {
          // console.log(resp)
          if (resp.status == 200) {
            // 分页数据回调
            this.loading = false;
            this.tableData = resp.data.data.datas;
            // this.total = res.data.result.datas.length;
          }
        })
        .catch(error => {
          this.$message.error("暂无数据");
        });
    },
    //页码更改
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      // console.log(val)
      const a = val;
      // this.listUsersPageChange();
      this.$axios
        .post("/api/admin/page/version/paging", {
          page: this.page,
          pageSize: this.pageSize
        })
        .then(resp => {
          // console.log(resp)
          if (resp.status == 200) {
            // 分页数据回调
            this.loading = false;
            this.tableData = resp.data.data.datas;
            // this.total = res.data.result.datas.length;
          }
        })
        .catch(error => {
          this.$message.error("暂无数据");
        });
    },

    //部署项目选择监听
    currStationChange(val) {
      this.value = val;
      // console.log(val);
      this.options.appNo = val;
      this.form.appVersionNo = val;
      // console.log(this.form.appVersionNo);
      var obj = {};
      obj = this.options.find(item => {
        return item.appNo === val;
      });
      this.form.appVersionName = obj.appName;
    },
    //部署服务器选择监听
    currStationServerChange(val) {
      this.serverValue = val;
      // console.log(val);
      this.serverOptions.appNo = val;
      this.addForm.projectServerNo = val;
      // console.log(this.form.appVersionNo);
      var obj = {};
      obj = this.serverOptions.find(item => {
        return item.serverNo === val;
      });
      this.addForm.projectServerName = obj.serverName;
    },
    //移除
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },

    //点击上传
    submitUpload(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
           console.log('submit!');
          this.$refs.upload.submit();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //上传检测
    beforeUpload(file) {

      let isLt2M = true;
      isLt2M = file.size / 1024 / 1024 < 100;
      if (!isLt2M) {
        this.loading = false;
        this.$message.error("上传文件大小不能超过 100MB!");
      } else if (isLt2M == 0) {
        this.loading = false;
        this.$message.error("请选择上传文件");
      }
      // this.form.name = file.name
      return isLt2M;
    },
    // 文件上传成功时的函数
    handleFilUploadSuccess(res, file, fileList) {
      // console.log(res);
      // this.$message.success(res.data);
      this.$refs.upload.clearFiles();
      this.dialogVisible2 = false;
      this.handleUpload();
      this.reload();
    },
    //文件上传过程中的函数(在这里获取进度条的进度)
    uploadFileProcess(event, file, fileList) {
      // console.log(event);
      // console.log(file);
      // console.log(fileList);
    },

    // 文件上传失败时的函数
    handleUploadError(err, file, fileList) {
      // console.log(err.response.data.message);
      this.$message.error(err.response.data.message);
    },

    // 处理上传进度
    progressFunction(e) {
      var progress_bar = document.getElementById("progress_bar");
      var loading_dom = document.getElementById("loading");
      var loading = Math.round((e.loaded / e.total) * 100);

      // console.log(progress_bar);
      // console.log(loading_dom);
      // console.log(loading);

      if (loading === 100) {
        loading_dom.innerHTML = "上传成功^_^,处理完成自动关闭";
      } else {
        loading_dom.innerHTML = "上传进度" + loading + "%";
      }

      progress_bar.style.width = String(loading * 3) + "px";
    },
    // 上传成功
    uploadComplete(e) {
      // console.log("上传成功！", e);
      // this.dialogVisible = false;
      this.$message.success("上传成功！");
      this.handleUpload();
      this.resetForm();
      var loading_dom = document.getElementById("loading");
      console.log(loading_dom);
      loading_dom.innerHTML = "上传进度0%";
      this.reload();
      // this.$refs.form.resetFields();
      // var file = document.getElementById("file");
      // file.outerHTML = file.outerHTML; //重置了file的outerHTML
    },
    // 上传失败
    uploadFailed(e) {
      // console.log("上传失败", e);
      this.$message.error("上传失败");
      this.resetForm();
      var loading_dom = document.getElementById("loading");
      loading_dom.innerHTML = "上传进度0%";
    },
    changeFile(e) {
      // console.log(e);
      // console.log(this.$refs.file.files[0]);
      // this.file_obj=this.$refs.file.files[0]
    },
    to_upload_file() {
      var file_obj = document.getElementById("avatar").files[0];

      // console.log(file_obj);
      // var file_obj1 = this.file_obj;
      if (file_obj) {
        // var url = "http://martin.vipgz1.idcfengye.com/api/localStorage";
        var url = "/api/localStorage";
        var form = new FormData();
        form.append("file", file_obj);
        var xhr = new XMLHttpRequest();
        xhr.onload = this.uploadComplete; // 添加 上传成功后的回调函数
        xhr.onerror = this.uploadFailed; // 添加 上传失败后的回调函数
        xhr.upload.onprogress = this.progressFunction; // 添加 监听函数
        xhr.open("POST", url, true);
        xhr.send(form);
      } else {
        alert("请先选择文件后再上传");
      }
    },

    //重置
    resetForm() {
      this.value = "";
      this.form.appVersionName = "";
      this.form.appVersionNo = "";
      this.form.appVersion = "";
      this.$refs.file.value = "";
    },
    //重置
    resetAddForm() {
      this.addForm.projectDevelopmentId = "";
      this.addForm.projectName = "";
      this.addForm.projectVersion = "";
      this.addForm.projectOwner = "";
      this.addForm.projectCreateTime = "";
      this.addForm.projectServerName = "";
      this.addForm.projectServerNo = "";
    },
    //重置
    resetAddServerForm() {
      this.addServerForm.serverName = "";
      this.addServerForm.serverIp = "";
      this.addServerForm.serverPort = "";
      this.addServerForm.serverUserName = "";
      this.addServerForm.serverPassword = "";
    },
    handleUpdate() {
      this.dialogVisible = true;
    },

    handleUpdate1() {
      this.dialogVisible2 = true;
    },
    // 处理文件上传的函数
    handleUpload() {
      // this.$message("上传完毕后自动关闭,请勿操作");

      this.$axios
        .post("/api/uploadApp", {
          version: this.form.appVersion,
          versionId: this.options.appNo
        })
        .then(res => {
          // console.log(res);
          if (res.data.code == 500) {
            this.$message.error(res.data.error);
          } else {
            this.$message.success(res.data.data);
          }
        })
        .catch(error => {
          this.$message.error(error.response.data.message);
        });

      // this.handleFilUploadSuccess()
    },

    formatBoolean: function(row, column, cellValue) {
      var ret = ""; //你想在页面展示的值
      if (cellValue) {
        ret = "有更新"; //根据自己的需求设定
      } else {
        ret = "无更新";
      }
      return ret;
    },
    formatRemoteBoolean: function(row, column, cellValue) {
      var ret = ""; //你想在页面展示的值
      if (cellValue) {
        ret = "已部署"; //根据自己的需求设定
      } else {
        ret = "未部署";
      }
      return ret;
    },

    // 检测更新操作操作
    handleEdit(index, row) {
      // console.log(row);
      this.$axios
        .post("/api/version/search", {
          version: row.appCurrentVersion,
          name: row.appName
        })
        .then(res => {
          if (res.status == 200) {
            if (res.data.data) {
              const h = this.$createElement;
              var that = this;
              this.$message.success({
                message: h("span", null, [
                  h("span", null, "当前版本可更新至最新版，请点击更新。。。")
                ]),
                //2秒后自动关闭
                duration: 2000
              });
            } else {
              this.$message("当前为最新版本，无需更新");
            }
          }
        })
        .catch(error => {
          // console.log(error);
          this.$message.error(error.response.data.message);
        });
    },

    // 立即更新操作
    handleDelete(index, row) {
      // 二次确认更新
      // console.log(row);
      this.$message.success("检测更新请求中");

      var letme = window.localStorage.getItem("username");
      console.log(letme);

      this.$axios
        .post("/api/version/windowsUpdateVersion", {
          version: row.appCurrentVersion,
          name: row.appName,
          username: letme
        })
        .then(res => {
          // console.log(res);
          if (res.status == 200) {
            if (res.data.data) {
              this.$message("当前版本已更新到最新版");
              // this.$message.success("即将完成自动更新");
              setTimeout(() => {
                //需要延迟的代码 :3秒后延迟跳转到首页，可以加提示什么的
                this.reload();
                //延迟时间：3秒
              }, 1000);
            } else {
              this.$message("当前版本已是最新版，务需更新请求");
            }
          }
        })
        .catch(error => {});
    },

    //处理信息上传
    handleAdd(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$axios
            .put("/api/project/add", this.addForm)
            .then(res => {
              // console.log(res);
              this.$message.success("新增成功");
              this.addDialogVisible = false;
              this.reload();
            })
            .catch(error => {
              this.$message.error(error.response.data.message);
              // console.log(error.response);
            });
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },

    //处理信息上传
    handleAddServer(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$axios
            .put("/api/project/addServer", this.addServerForm)
            .then(res => {
              // console.log(res);
              this.$message.success("新增成功");
              this.addDialogVisible = false;
              this.reload();
            })
            .catch(error => {
              this.$message.error(error.response.data.message);
              // console.log(error.response);
            });
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },

    //新增项目信息
    createProject() {
      this.addDialogVisible = true;
    },

    //选择框
    onTableSelect(rows, row) {
      let selected = rows.length && rows.indexOf(row) !== -1;

      console.log(JSON.stringify(rows));
      if (selected) {
        if (rows.length > 1) {
          this.$message.error("当前仅支持单部署");
          return false;
        } else {
          this.id = row.deployId;
          this.name = row.appName;
          this.createBy = row.appOwner;
        }
      } else if (selected == 0) {
        this.$message.error("至少选择一个！");
        return false;
      }
    },

    //项目部署
    remoteDevelopment() {
      this.$message("正在开始部署请稍后");
      this.$axios
        .post("/api/version/windowsClientAddVersion", {
          projectDevelopmentId: this.id,
          projectName: this.name,
          projectOwner: this.createBy,
          username: window.localStorage.getItem("username")
        })
        .then(res => {
          console.log(res);
          this.$message.success("部署成功");
          this.reload();
        })
        .catch(error => {
          // console.log(error.response.data.message);
          this.$message.error(error.response.data.message);
          this.$refs.multipleTable.clearSelection();
        });
    },
    //新建服务器
    addServer() {
      this.addServerDialogVisible = true;
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 220px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>

<style scoped>
::v-deep .el-image__error,
.el-image__placeholder {
  background: none;
}
::v-deep .el-image-viewer__wrapper {
  top: 55px;
}
</style>